<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type" multiple></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" multiple></select-app-source>
                </el-form-item>
                <el-form-item label="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 140px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-charts" type="danger" @click="showChart">查看图表</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            show-footer
            :footer-method="footerMethod"
            :max-height="maxHeight">
            <vxe-table-column title="时段" field="hour" min-width="80" fixed="left" sortable sort-by="hour"/>
            <vxe-table-colgroup title="推广费" min-width="240">
                <vxe-table-column title="当天" field="spreadCost" formatter="formatHumanRmb" min-width="80" sortable sort-by="spreadCost"/>
                <vxe-table-column title="前一天" field="spreadCostOld" formatter="formatHumanRmb" min-width="80"/>
                <vxe-table-column title="对比" field="spreadCostDiff" formatter="formatHumanRmb" min-width="80" sortable sort-by="spreadCostDiff"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="注册人数" min-width="210">
                <vxe-table-column title="当天" field="registerUser" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="前一天" field="registerUserOld" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="对比" field="registerUserDiff" formatter="formatHuman" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="48H新增付费人数" min-width="210">
                <vxe-table-column title="当天" field="payFirstOldUser48" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="前一天" field="payFirstOldUser48Old" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="对比" field="payFirstOldUser48Diff" formatter="formatHuman" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="48H新增付费成本" min-width="210">
                <vxe-table-column title="当天" field="payFirstOldUser48Cost" formatter="formatHumanRmb" min-width="70"/>
                <vxe-table-column title="前一天" field="payFirstOldUser48CostOld" formatter="formatHumanRmb" min-width="70"/>
                <vxe-table-column title="对比" field="payFirstOldUser48CostDiff" formatter="formatHumanRmb" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="活跃人数" min-width="210">
                <vxe-table-column title="当天" field="loginUser" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="前一天" field="loginUserOld" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="对比" field="loginUserDiff" formatter="formatHuman" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="充值金额" min-width="210">
                <vxe-table-column title="当天" field="pay" formatter="formatHumanRmb" min-width="70"/>
                <vxe-table-column title="前一天" field="payOld" formatter="formatHumanRmb" min-width="70"/>
                <vxe-table-column title="对比" field="payDiff" formatter="formatHumanRmb" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="充值次数" min-width="210">
                <vxe-table-column title="当天" field="payCnt" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="前一天" field="payCntOld" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="对比" field="payCntDiff" formatter="formatHuman" min-width="70"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="充值人数" min-width="210">
                <vxe-table-column title="当天" field="payUser" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="前一天" field="payUserOld" formatter="formatHuman" min-width="70"/>
                <vxe-table-column title="对比" field="payUserDiff" formatter="formatHuman" min-width="70"/>
            </vxe-table-colgroup>
            <!--            <vxe-table-colgroup title="权益卡净值(获得-消耗)" min-width="160">-->
            <!--                <vxe-table-column title="当天" field="hbChange" formatter="formatHuman" min-width="80"/>-->
            <!--                <vxe-table-column title="前一天" field="hbChangeOld" formatter="formatHuman" min-width="80"/>-->
            <!--                <vxe-table-column title="对比" field="hbChangeDiff" formatter="formatHuman" min-width="80"/>-->
            <!--            </vxe-table-colgroup>-->
            <vxe-table-colgroup title="棒棒糖兑换金币" min-width="160">
                <vxe-table-column title="当天" field="hbToBulletCost" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="前一天" field="hbToBulletCostOld" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="对比" field="hbToBulletCostDiff" formatter="formatHuman" min-width="80"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="棒棒糖兑换积分" min-width="160">
                <vxe-table-column title="当天" field="thirdExchange" :formatter="['formatW', 1]" min-width="80"/>
                <vxe-table-column title="前一天" field="thirdExchangeOld" :formatter="['formatW', 1]" min-width="80"/>
                <vxe-table-column title="积分对比" field="thirdExchangeDiff" :formatter="['formatW', 1]" min-width="80"/>
                <vxe-table-column title="积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="交换次数" field="thirdExchangeCnt" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="首日积分率" field="thirdExchangeFirstUserScale" formatter="formatPercent" min-width="80"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="场次流水" min-width="360">
                <vxe-table-column title="当天" field="sceneRunningWater" formatter="formatHuman" min-width="120"/>
                <vxe-table-column title="前一天" field="sceneRunningWaterOld" formatter="formatHuman" min-width="120"/>
                <vxe-table-column title="对比" field="sceneRunningWaterDiff" formatter="formatHuman" min-width="120"/>
            </vxe-table-colgroup>
        </vxe-table>


        <el-dialog
            title="图表"
            :visible.sync="dialogChart.show"
            class="text-center"
            top="5vh"
            width="80%">
            <hour-chart ref="hourChart"></hour-chart>
        </el-dialog>

    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';
import VXETable from "vxe-table";
import HourChart from './hour-chart'

export default {
    components: {
        HourChart,
        SelectAppSourceType,
    },
    data() {
        return {
            search: {
                source: '',
                source_type: '',
                day: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            dialogChart: {
                show: false,
            }
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/Hour', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = moment().format('yyyy-MM-DD');
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({columns, data}) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 1;
            }, (sums, allFields) => {
                // 计算 withdrawFirstUserScale
                sums[allFields.withdrawFirstUserScale] = '-';
                // 计算 thirdExchangeFirstUserScale
                sums[allFields.thirdExchangeFirstUserScale] = '-';
                // 计算 payFirstOldUser48Cost
                sums[allFields.payFirstOldUser48Cost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.payFirstOldUser48]);
                // 计算 payFirstOldUser48CostOld
                sums[allFields.payFirstOldUser48CostOld] = this.$helper.calcDivision(sums[allFields.spreadCostOld], sums[allFields.payFirstOldUser48Old]);
                // 计算 payFirstOldUser48CostDiff
                sums[allFields.payFirstOldUser48CostDiff] = sums[allFields.payFirstOldUser48Cost] - sums[allFields.payFirstOldUser48CostOld];
                return sums;
            });
        },
        showChart() {
            this.dialogChart.show = true;
            this.$nextTick(() => {

                this.$refs.hourChart.setOptions(this.$refs.xTable.tableData);
            })
        }
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

